
<template>
    <div class="header">
        <div class="left logo_content">
            <img src="@/assets/img/logo.png" alt="logo png" class="logo_img" />
        </div>
        <div class="text-center header_title">
            <h1>手术信息查询系统</h1>
        </div>
        <button class="btn btn_white">
            返回
        </button>
        <div class="right header_detail">
           <img src="@/assets/img/qrcode.png" alt="logo png" class="logo_img" /> 
        </div>
    </div>
</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue
    } from 'vue-property-decorator';

    @Component
    export default class Header extends Vue {

    }
</script>


<style lang="scss" scoped>

    .header{
        overflow:hidden;
        padding:0.4rem 0.25rem;
        padding-left:0.1rem;
        position:relative;
        .btn{
            position: absolute;
            right: 120px;
            bottom: 20px;
        }
        
        .header_title{
            position:absolute;
            width:100%;
            color:$themecolor;
            h1{
                font-size:0.36rem;
            }
        }
        .logo_content{

            width:25%;
            position: relative;
            height: 45px;
            max-width:230px;
            .logo_img{

                width:130%;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;

            }
        }

        .header_detail{
            position: absolute;
            right: 10px;
            top: 0px;
            bottom:0;
            height:80px;
            margin:auto;
            img{
                width:80px;
                height:80px;
                margin:0;
            }
            ul{
                li{
                    color:$grey_p;
                    margin-left:0.1rem;
                }
            }
        }
        
    }
    


</style>